<template>
  <div>
    <el-dialog :title="dialogData.title"
               :visible.sync="visible"
               center
               :before-close="modalClose"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               width="60%">
      <el-form :model="formdata"
               label-position="right"
               ref="formdata"
               label-width="150px"
               :rules='rules'>
        <el-form-item label="服务名称："
                      prop="name">
          <el-input v-model="formdata.name"
                    maxlength="50"
                    autocomplete="off"
                    style="width:50%"
                    placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="标签：">
          <el-input v-model="formdata.label"
                    maxlength="50"
                    autocomplete="off"
                    style="width:50%"
                    placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="列表图片："
                      prop="imageUrl">
          <el-upload class="avatar-uploader"
                     :action="imageUploadUrl"
                     :show-file-list="false"
                     accept=".JPG, .PNG, .JPEG,.jpg, .png, .jpeg"
                     :on-success="handleAvatarSuccess"
                     :before-upload="beforeAvatarUpload">
            <img v-if="formdata.imageUrl"
                 :src="formdata.imageUrl"
                 class="avatar">
            <i v-else
               class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="详情图片："
                      prop="detailImageUrl">
          <el-upload multiple
                     :limit='6'
                     :action="imageUploadUrl"
                     accept=".JPG, .PNG, .JPEG,.jpg, .png, .jpeg"
                     list-type="picture-card"
                     :on-success="handlePictureCardPreview"
                     :file-list='formdata.detailImage'
                     :on-exceed='onexceed'
                     :on-remove='onremove'
                     :before-upload="beforeAvatarUpload">
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="服务选项："
                      prop="itemList">
          <el-button type="success"
                     style="background-color:#33c99e;color:#FFF;margin-bottom:5px"
                     @click="addyihang(0)">新 增 一 项</el-button>
          <el-table :data="formdata.itemList"
                    style="width: 100%"
                    border>
            <el-table-column prop="name"
                             label="价格（元）">
              <template slot-scope="scoped">
                <!-- <el-input v-model.number="scoped.row.price" maxlength="50"></el-input> -->
                <el-input-number :min="0"
                                 :precision="2"
                                 :controls="false"
                                 v-model="scoped.row.price"
                                 type="number"
                                 placeholder="请输入"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column prop="address"
                             label="数据条数">
              <template slot-scope="scoped">
                <el-input-number :min="0"
                                 :precision="0"
                                 :controls="false"
                                 v-model="scoped.row.num"
                                 type="number"
                                 placeholder="请输入"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column prop="address"
                             label="操作">
              <template slot-scope="scoped">
                <el-button type="text"
                           @click='deleteOne1(scoped.$index,formdata.itemList)'>删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="标配服务："
                      prop="standardService">
          <el-input v-model="formdata.standardService"
                    maxlength="500"
                    show-word-limit
                    type="textarea"
                    :rows="4"
                    autocomplete="off"
                    style="width:50%"></el-input>
        </el-form-item>
        <el-form-item label="特别告知："
                      prop="specialNote">
          <el-input v-model="formdata.specialNote"
                    maxlength="500"
                    show-word-limit
                    type="textarea"
                    :rows="4"
                    autocomplete="off"
                    style="width:50%"></el-input>
        </el-form-item>
        <el-form-item label="推广分成：">
          <el-input-number :min="0"
                           :precision="2"
                           :controls="false"
                           v-model="formdata.extendFee"
                           type="number"
                           placeholder="请输入"
                           style="width:50%"></el-input-number>
        </el-form-item>
        <el-form-item label="解读分成：">
          <div v-for="it in formdata.healthCheckPackageReadPriceDtos"
               :key='it.id'
               style="width:33.33%;float:left;margin-bottom:15px;display:flex;align-items:center;">
            <p style="width:200px;text-align:right">
              <span style="color:red">*</span>
              {{it.doctorTitleName}}：
            </p>
            <el-input-number :min="0"
                             :precision="2"
                             :controls="false"
                             v-model="it.price"
                             type="number"
                             placeholder="单位（元）"></el-input-number>
          </div>
        </el-form-item>
        <el-form-item label="购买服务后，是否填写健康服务号："
                      label-width="240px">
          <el-radio-group v-model="formdata.isInvitationCode">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <p align="center">
        <el-button @click="modalClose">取 消</el-button>
        <el-button type="primary"
                   @click="onSubmit">保 存</el-button>
      </p>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    props: ['dialogData', 'visible'],
    data () {
      return {
        rules: {
          name: [
            { required: true, message: '请填写分类名称' }
          ],
          imageUrl: [
            { required: true, message: '请填上传列表图片' }
          ],
          detailImageUrl: [
            { required: true, message: '请上传详情图片' }
          ],
          itemList: [
            { required: true, message: '请完善服务选项' }
          ],
          standardService: [
            { required: true, message: '请填写标配服务' }
          ],
          specialNote: [
            { required: true, message: '请选择服务医院' }
          ],
        },
        formdata: {
          type: 3,
          imageUrl: null,
          detailImageUrl: [],
          detailImage: [],
          itemList: [{ id: 0 }],
          healthCheckPackageReadPriceDtos: [
            { doctorTitleId: '3', doctorTitleName: '主任医师' },
            { doctorTitleId: '4', doctorTitleName: '副主任医师' },
            { doctorTitleId: '6', doctorTitleName: '主治医师' },
            { doctorTitleId: '7', doctorTitleName: '住院医师' },
            { doctorTitleId: '30', doctorTitleName: '公共卫生执业助理医师' },
            { doctorTitleId: '32', doctorTitleName: '公共卫生执业医师' }
          ]
        },
        detailImageUrlArr: [],
        imageUploadUrl: this.api.appUpgradeUpload.url,
      }
    },
    methods: {
      modalClose () {
        this.$emit('update:visible', false); // 直接修改父组件的属性
      },
      addyihang (index) {
        switch (index) {
          case 0:
            this.formdata.itemList.push({});
            break
        }
      },
      deleteOne1 (index, table) {
        if (table.length == 1) {
          this.$message.warning('至少保留一项');
          return
        } else {
          table.splice(index, 1);
        }
      },
      onSubmit () {
        this.formdata.detailImageUrl = JSON.stringify(this.detailImageUrlArr);
        this.formdata.way = 1;
        if (!this.formdata.name) {
          this.$message.warning('请填写分类名称');
          return
        }
        if (!this.formdata.imageUrl) {
          this.$message.warning('请上传列表图片');
          return
        }
        if (!this.detailImageUrlArr) {
          this.$message.warning('请上传详情图片');
          return
        }
        /*  for (let index = 0; index < this.formdata.healthCheckPackageReadPriceDtos.length; index++) {
           const element = this.formdata.healthCheckPackageReadPriceDtos[index];
           if (element.price === '' || element.price === null || element.price === undefined) {
             this.$message.warning('请完善解读分成费用');
             return
           }
         } */
        if (this.formdata.healthCheckPackageReadPriceDtos.some(element => element.price === '' || element.price === null || element.price === undefined)) {
          this.$message.warning('请完善解读分成费用!');
          return
        }
        this.post(this.api.cooperationHospital.healthCheckManageuploadInfo, this.formdata).then(res => {
          if (res.data.code === '200') {
            this.$message.success(res.data.message);
            this.modalClose();
            this.$parent._getList();
          }
        })
      },
      handleAvatarSuccess (res) {
        this.formdata.imageUrl = res.object[0];
      },
      beforeAvatarUpload (file) {
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
        }
        return isLt2M;
      },
      handlePictureCardPreview (res) {
        this.detailImageUrlArr.push(res.object[0]);
      },
      onremove (res, list) {
        if (res.response) {
          this.detailImageUrlArr = this.detailImageUrlArr.filter(ele => ele != res.response.object[0]);
        } else {
          this.detailImageUrlArr = this.detailImageUrlArr.filter(ele => ele != res.url);
        }
      },
      onexceed () {
        this.$message.warning('详情图片至多上传6张');
      }
    },
    created () {
      if (this.dialogData.info) {

        this.post(this.api.cooperationHospital.healthCheckManagegetDetail, {
          id: this.dialogData.info.id
        }).then(res => {
          if (res.data.code === '200') {
            let resData = res.data.object;
            this.formdata = res.data.object;
            this.detailImageUrlArr = JSON.parse(this.formdata.detailImageUrl);
            this.formdata.detailImage = [];
            this.detailImageUrlArr.forEach(ele => {
              let op = {};
              op.name = ele;
              op.url = ele;
              this.formdata.detailImage.push(op);
            })
            if (!resData.hasOwnProperty('healthCheckPackageReadPriceDtos')) {
              this.formdata['healthCheckPackageReadPriceDtos'] = [
                { doctorTitleId: '3', doctorTitleName: '主任医师' },
                { doctorTitleId: '4', doctorTitleName: '副主任医师' },
                { doctorTitleId: '6', doctorTitleName: '主治医师' },
                { doctorTitleId: '7', doctorTitleName: '住院医师' },
                { doctorTitleId: '30', doctorTitleName: '公共卫生执业助理医师' },
                { doctorTitleId: '32', doctorTitleName: '公共卫生执业医师' }
              ]
            } else {
              this.healthCheckPackageReadPriceDtos = resData.healthCheckPackageReadPriceDtos
            }
            this.$forceUpdate();
          }
        })

      } else {
        this.formdata['healthCheckPackageReadPriceDtos'] = [
          { doctorTitleId: '3', doctorTitleName: '主任医师' },
          { doctorTitleId: '4', doctorTitleName: '副主任医师' },
          { doctorTitleId: '6', doctorTitleName: '主治医师' },
          { doctorTitleId: '7', doctorTitleName: '住院医师' },
          { doctorTitleId: '30', doctorTitleName: '公共卫生执业助理医师' },
          { doctorTitleId: '32', doctorTitleName: '公共卫生执业医师' }
        ]
      }
    }
  }
</script>

<style>
  .el-upload-list--picture-card .el-upload-list__item {
    width: 98px !important;
    height: 98px !important;
  }
  .el-upload--picture-card {
    width: 98px !important;
    height: 98px !important;
    line-height: 98px !important;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 98px !important;
    height: 98px !important;
    line-height: 98px !important;
    text-align: center;
  }
  .avatar {
    width: 98px !important;
    height: 98px !important;
    display: block;
  }
  .ivu-select-dropdown {
    z-index: 1000 !important;
  }
</style>